<template>
	<view>
		<view class="header status_bar">
			<view class="back iconfont" @tap="backPage">&#xe779;</view>
			<view class="text">订单详情</view>
		</view>
		<view class="clear_box"></view>

		<view class="address_box">
			<view class="icon iconfont">&#xe638;</view>
			<view class="text_box" v-if="address != null" data-url="/pages/personalcenter/address/address" @click="gotopage">
				<view class="name_box">
					<view class="name">{{ address.receive_name }}</view>
					<view class="phone">{{ address.receive_tel }}</view>
				</view>
				<view class="address">{{ address.area_info }}{{ address.address }}</view>
			</view>
			<view class="text_box" v-if="address == null">
				<view class="add_box" data-url="/pages/personalcenter/address/address" @click="gotopage">
					<view class="text">添加收货地址</view>
					<view class="arrow iconfont">&#xe775;</view>
				</view>
			</view>
		</view>

		<block v-for="(item, index) in info" :key="'info' + index">
			<view class="content">
				<block v-for="(item02, index02) in item.goods_list">
					<view class="goods_box">
						<image class="goods_img" :src="item02.goods_master_image" mode="scaleToFill"></image>
						<view class="text_box">
							<view class="title">{{ item02.goods_name }}</view>
							<view class="text">
								<view class="n">{{ item02.sku_name }}</view>
							</view>
							<view class="show">
								<view class="money_box">
									￥{{ item02.goods_price }}
									<!-- <view class="no_money">
									{{ item.nomoney }}
									<view class="line"></view>
								</view> -->
								</view>
								<view class="menu">x{{ item02.buy_num }}</view>
							</view>
						</view>
					</view>
				</block>
			</view>

			<view class="address_list">
				<view class="title">运费</view>
				<view class="text" v-if="item.freight_money == 0">包邮</view>
				<view class="text" v-if="item.freight_money > 0">￥{{ item.freight_money }}</view>
			</view>
			<view class="address_list" v-if="item.full_dec_money > 0">
				<view class="title">满减</view>
				<view class="text">-￥{{ item.full_dec_money }}</view>
			</view>
			<!-- <view
				class="address_list"
				:data-id="item.store_info.id"
				:data-goods="item.goods_list"
				:data-reduce="item.full_dec_money"
				@click="gotoCouponPage"
				v-if="item.store_info.class_type < 3"
			>
				<view class="title">
					优惠券
					<span v-if="item.is_coupon">(有券可用)</span>
				</view>

				<view class="text iconfont">
					<block v-for="(item03, index03) in couponAll">
						<span class="coupon" v-if="item.store_info.id == item03.shopId">-{{ item03.value }}</span>
					</block>
					&#xe775;
				</view>
			</view> -->
			<view class="address_list">
				<view class="title">订单备注</view>
				<input type="text" value="" placeholder="选填，请先和商家协商一致" />
			</view>
		</block>




		<view class="footer">
			<!-- <view class="rule">此商品为活动特价商品，非质量问题暂不支持退换货！</view> -->
			<view class="menu_box">
				<view class="menu">
					实付款：
					<view class="m">￥{{ total | setValueData }}</view>
				</view>
				<view class="menu" @tap="noTimeGo">确认并支付</view>
			</view>
		</view>

		<!-- <view class="show_box" v-if="show_box" @tap="autoShowBox">
			<view class="pupu_box" @tap.stop="">
				<view class="title">提示</view>
				<view class="rule">此商品为活动特价商品，非质量问题<span>暂不支持退换货！</span></view>
				<view class="menu_box">
					<view class="menu" @tap="autoShowBox">好的</view>
					<view class="menu">不再提醒</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storeId: '',
				info: '',
				show_box: false,
				select: 0,
				address: {
					name: '程笑笑',
					phone: '15880123225',
					text: ''
				},
				goods: [

				],
				goods_id: '',
				sku_id: '',
				buy_num: '',
				collective_id: '',
				addressId: '',
				couponId: '0',
				couponNumber: '',
				couponData: '',
				couponAll: [],
				couid: '',
				total: 0,
				remarks: '',
				payType: 'alipay',
				params: '',
				shopRemarks: {
					remark_params: []
				},
				member: '',
				select02: false,
				couponNum: 0,
				class_type: ''
			};
		},
		filters: {
			setValueData(num) {
				let realVal = parseFloat(num).toFixed(2);
				return realVal;
			}
		},
		onLoad(e) {
			let that = this;
			that.goods_id = e.goods_id;
			that.sku_id = e.sku_id;
			that.buy_num = e.buy_num;
			that.collective_id = e.collective_id;
			if (e.params) {
				that.params = e.params;
			}
			//console.log(e)
			//console.log(that.params)
		},
		onShow() {
			let that = this;
			that.select02 = false;
			that.total = 0;

			if (that.goods_id || that.params) {
				that.loadData();
				that.loadAddressData(); //地址
			}
		},
		methods: {
			getRemarks(e) {
				let that = this;
				let away = {
					store_id: e.target.dataset.id,
					remark: e.detail.value
				};
				that.shopRemarks.remark_params = that.shopRemarks.remark_params.concat(away);
				//console.log(that.shopRemarks);
			},
			noTimeGo() {
				let that = this;
				// if (that.info[0].shipping_type == 1) {
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: '本区域服务时段为' + that.info[0].online_time + '，当前不在服务时段',
				// 		showCancel: false,
				// 		success: function(res) {
				// 			if (res.confirm) {
				// 				//console.log('用户点击确定');
				// 				that.autoShowBox();
				// 			} else if (res.cancel) {
				// 				//console.log('用户点击取消');
				// 			}
				// 		}
				// 	});
				// } else {
				// 	that.autoShowBox();
				// }

				that.autoShowBox();
			},
			autoShowBox() {
				let that = this;
				let couponAllData = {
					coupon_params: that.couponAll
				};

				//console.log(couponAllData)

				that.Net._post(
					'terminal/order/create', {
						address_id: that.addressId,
						coupon_id: that.couid,
						remark: that.remarks,
						goods_id: that.goods_id,
						sku_id: that.sku_id,
						buy_num: that.buy_num,
						class_type: that.class_type,
						collective_id: that.collective_id,
						ifcart: '0',
						shipping_type: '1',
						remark_params: JSON.stringify(that.shopRemarks),
						params: that.params,
						coupon_params: JSON.stringify(couponAllData),
						plat_coupon_num: that.couponNum,
						payment_name: 'balance',
					},
					res => {
						if (res.code == 200) {
							//console.log(res)
							let orderId = res.data.order_id;

							// #ifdef APP-PLUS
							that.Net._post('terminal/order/pay', {
								order_id: orderId,
								payment_name: 'balance',
								device: 'app',
								pay_password: ''
							}, rex => {
								if (rex.code == 200) {
									uni.showToast({
										title: '订单购买成功',
										duration: 2000,
										icon: 'none'
									});
									//console.log(rex.data)
									// uni.setStorageSync('_COUPON_', null);
									let orderData = rex.data;

									// uni.requestPayment({
									// 	provider: that.payType,
									// 	orderInfo: orderData, //微信、支付宝订单数据
									// 	success: function(res) {
									// 		// uni.showToast({
									// 		//     title: '订单购买成功',
									// 		//     duration: 2000,
									// 		// 		icon:'none'
									// 		// });
									// 		uni.showModal({
									// 			title: '提示',
									// 			content: '订单购买成功',
									// 			showCancel: false,
									// 			success: function(res) {
									// 				if (res.confirm) {
									// 					//console.log('用户点击确定');
									// 					uni.switchTab({
									// 						url: '/pages/personalcenter/personalcenter'
									// 					});
									// 				} else if (res.cancel) {
									// 					console.log('用户点击取消');
									// 				}
									// 			}
									// 		});
									// 		console.log('success:' + JSON.stringify(res));
									// 	},
									// 	fail: function(err) {
									// 		console.log('fail:' + JSON.stringify(err));
									// 		that.select02 = false;
									// 		that.couponNum = 0;
									// 		uni.switchTab({
									// 			url: '/pages/personalcenter/personalcenter'
									// 		});
									// 	}
									// });
								}
							});
							// #endif

							// #ifdef MP-WEIXIN
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {
									let code = loginRes.code;
									console.log(code);
									that.Net._post('user/order/pay', {
										order_id: orderId,
										payment_name: 'wxpay',
										device: 'mini',
										pay_password: '',
										code: code
									}, rex => {
										if (rex.code == 200) {
											//console.log(rex.data)
											uni.setStorageSync('_COUPON_', null);
											let orderData = rex.data;

											uni.requestPayment({
												provider: 'wxpay',
												timeStamp: orderData.timeStamp,
												nonceStr: orderData.nonceStr,
												package: orderData.package,
												signType: orderData.signType,
												paySign: orderData.paySign,
												success: function(res) {
													// uni.showToast({
													//     title: '订单购买成功',
													//     duration: 2000,
													// 		icon:'none'
													// });
													uni.showModal({
														title: '提示',
														content: '订单购买成功',
														showCancel: false,
														success: function(res) {
															if (res.confirm) {
																//console.log('用户点击确定');
																uni.switchTab({
																	url: '/pages/personalcenter/personalcenter'
																});
															} else if (res.cancel) {
																console.log('用户点击取消');
															}
														}
													});
													console.log('success:' + JSON.stringify(res));
												},
												fail: function(err) {
													console.log('fail:' + JSON.stringify(err));
													that.select02 = false;
													that.couponNum = 0;
													uni.switchTab({
														url: '/pages/personalcenter/personalcenter'
													});
												}
											});
										}
									});
								}
							});
							// #endif
						}
					}
				);
			},
			loadData() {
				let that = this;
				that.Net._post(
					'terminal/order/before', {
						goods_id: that.goods_id,
						sku_id: that.sku_id,
						buy_num: that.buy_num,
						class_type: that.class_type,
						collective_id: that.collective_id,
						ifcart: '0',
						params: that.params,
						coupon_params: JSON.stringify(that.couponAll),
					},
					res => {
						if (res.code == 200) {
							//console.log(res)
							that.info = res.data;
							// that.goods = res.data[0].goods_list;
							// that.storeId= res.data[0].store_info.id;
							// that.total = res.data[0].store_total_price;
							that.total = 0;
							res.data.forEach(item => {
								that.total += Number(item.store_total_price);
							});

							//console.log(that.total)

							res.data.forEach(item => {
								// 满减
								that.total -= Number(item.full_dec_money);
							});

							res.data.forEach(item => {
								// 运费
								that.total += Number(item.freight_money);
							});


						}
					}
				);
			},
			loadAddressData() {
				let that = this;
				that.Net._get('user/address/get_default', {}, res => {
					if (res.code == 200) {
						//console.log(res)
						that.address = res.data;
						that.addressId = res.data.id;
					}
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotoCouponPage(e) {
				let that = this;
				let id_ = e.currentTarget.dataset.id;
				let goods = e.currentTarget.dataset.goods;
				let reduce = e.currentTarget.dataset.reduce;

				let goodsMoney = 0;
				if (goods.length > 0) {
					goods.forEach(item => {
						goodsMoney += Number(item.total);
					});
				}
				let reduceMoney = Number(goodsMoney) - Number(reduce);
				let url = '/pages/index/classify/coupon?id=' + id_ + '&money=' + reduceMoney + '&getCoupon=' + JSON.stringify(
					that.couponAll);
				uni.navigateTo({
					url: url
				});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
			setTick(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				this.select = index;
				if (index == 0) {
					that.payType = 'alipay';
				} else if (index == 1) {
					that.payType = 'wxpay';
				} else if (index == 2) {
					that.payType = 'balance';
				}
			},
			setTick02(e) {
				let that = this;
				let money = e.currentTarget.dataset.money;
				let num = e.currentTarget.dataset.num;
				if (num >= that.info.length) {
					that.couponNum = that.info.length;
				} else if (num < that.info.length) {
					that.couponNum = num;
				} else if (num == 0) {
					that.couponNum = 0;
				}

				// console.log(money);
				// console.log(that.couponNum);

				that.select02 = !that.select02;
				if (that.select02 == true) {
					that.total = that.total - money * that.couponNum;
				} else if (that.select02 == false) {
					that.total = that.total + money * that.couponNum;
					that.couponNum = 0;
				}
			}
		}
	};
</script>

<style>
	page {
		padding-top: 3%;
		padding-bottom: 25vw !important;
	}


	.address_box {
		width: 100%;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 5vw 4%;
	}

	.address_box .icon {
		width: 10vw;
		height: 10vw;
		border-radius: 50%;
		text-align: center;
		line-height: 10vw;
		font-size: 5vw;
		color: #fff;
		background-color: #ff7f22;
		margin-right: 3vw;
	}

	.address_box .text_box {
		flex: 1;
	}

	.address_box .text_box .name_box {
		width: 100%;
		display: flex;
	}

	.address_box .text_box .name_box .name {
		font-size: 3.5vw;
		color: #333;
		font-weight: bold;
		line-height: 6vw;
	}

	.address_box .text_box .name_box .phone {
		font-size: 3.5vw;
		color: #999;
		line-height: 6vw;
		margin-left: 3vw;
	}

	.address_box .text_box .address {
		font-size: 3.4vw;
		color: #666;
		line-height: 5vw;
		margin-top: 1.5vw;
	}

	.address_box .text_box .add_box {
		display: flex;
		margin-top: 3vw;
	}

	.address_box .text_box .add_box .text {
		font-size: 3.5vw;
		color: #666;
		line-height: 6vw;
		flex: 1;
	}

	.address_box .text_box .add_box .arrow {
		font-size: 4vw;
		color: #999;
		line-height: 6vw;
		flex: 1;
		text-align: right;
	}

	.content {
		width: 100%;
		margin: 0 auto;
		background: #fff;
		border-radius: 1.5vw;
		margin: 3% 0 1px;
		padding: 3vw 4%;
	}

	.content .goods_box {
		width: 100%;
		display: flex;
		margin-bottom: 2vw;
	}

	.content .goods_box .goods_img {
		width: 24vw;
		height: 24vw;
		border-radius: 2vw;
		margin: 0 3vw;
	}

	.content .goods_box .text_box {
		flex: 1;
		margin-right: 3vw;
	}

	.content .goods_box .text_box .title {
		font-size: 3.5vw;
		color: #333;
		line-height: 6vw;
		flex: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.content .goods_box .text_box .text {
		margin-top: 2vw;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.content .goods_box .text_box .text .n {
		font-size: 3.2vw;
		color: #999;
	}

	.content .goods_box .text_box .text .m {
		font-size: 3.2vw;
		color: #999;
	}

	.content .goods_box .text_box .show {
		width: calc(100%);
		display: flex;
		position: relative;
		margin-top: 6vw;
	}

	.content .goods_box .text_box .show .money_box {
		width: 65%;
		display: flex;
		justify-content: flex-start;
		font-size: 4vw;
		color: #333333;
		line-height: 6vw;
		font-weight: bold;
	}

	.content .goods_box .text_box .show .money_box .no_money {
		color: #999;
		line-height: 6vw;
		position: relative;
		font-size: 3.5vw;
		margin-left: 0.5vw;
		font-weight: 500;
		margin-left: 1.5vw;
	}

	.content .goods_box .text_box .show .money_box .no_money .line {
		width: 100%;
		height: 1px;
		background-color: #999;
		position: absolute;
		top: calc(50% - 0vw);
		left: 0;
	}

	.content .goods_box .text_box .show .menu {
		line-height: 5vw;
		color: #999;
		font-size: 3.5vw;
		position: absolute;
		right: 0vw;
	}

	.address_list {
		width: 100%;
		background-color: #fff;
		padding: 0 4%;
		display: flex;
	}

	.address_list .title {
		flex: 1;
		height: 10vw;
		line-height: 10vw;
		font-size: 3.5vw;
		color: #333;
		display: flex;
		align-items: center;
	}

	.address_list .title span {
		margin-left: 1vw;
		color: #ff7f22;
	}

	.address_list .text {
		flex: 1;
		height: 10vw;
		line-height: 10vw;
		font-size: 3.5vw;
		color: #999;
		text-align: right;
	}

	.address_list .money {
		flex: 1;
		height: 10vw;
		line-height: 10vw;
		font-size: 3.5vw;
		color: #333333;
		text-align: right;
		font-weight: bold;
	}

	.address_list input {
		flex: 1;
		height: 10vw;
		line-height: 10vw;
		font-size: 3.5vw;
		color: #999;
		text-align: right;
	}

	.address_list .coupon {
		color: #333333;
	}

	.payment_box {
		width: 100%;
		background-color: #fff;
		padding: 0 4%;
		margin-top: 3%;
	}

	.payment_box .payment_title {
		font-size: 3.5vw;
		color: #333;
		line-height: 10vw;
		height: 10vw;
	}

	.payment_box .payment_list {
		width: 100%;
		display: flex;
	}

	.payment_box .payment_list .icon {
		width: 10vw;
		line-height: 12vw;
		text-align: center;
		font-size: 8vw;
		margin-right: 3vw;
	}

	.payment_box .payment_list .title {
		width: 15vw;
		line-height: 12vw;
		text-align: left;
		font-size: 3.5vw;
		margin-right: 3vw;
		color: #333;
	}

	.payment_box .payment_list .text {
		flex: 1;
		line-height: 12vw;
		text-align: left;
		font-size: 3.5vw;
		color: #999;
	}

	.payment_box .payment_list .tick {
		width: 6vw;
		line-height: 6vw;
		text-align: center;
		font-size: 5vw;
		margin-top: 3vw;
		color: #e8e8e8;
	}

	.paymentIcon01 {
		font-size: 8vw !important;
		color: #01aaef;
	}

	.paymentIcon02 {
		font-size: 7.5vw !important;
		color: #3dcc32;
	}

	.paymentIcon03 {
		font-size: 7.5vw !important;
		color: #fec248;
	}

	.tickColor {
		color: #ff7f22 !important;
	}

	.footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 99;
	}

	.footer .rule {
		width: 100%;
		height: 10vw;
		line-height: 10vw;
		font-size: 3vw;
		color: #ff7f22;
		text-align: center;
		background-color: #f5fbfd;
	}

	.footer .menu_box {
		width: 100%;
		display: flex;
	}

	.footer .menu_box .menu {
		width: 50%;
		height: 13.5vw;
		line-height: 13.5vw;
		display: flex;
		justify-content: center;
		font-size: 4vw;
	}

	.footer .menu_box .menu .m {
		font-size: 4.5vw;
		font-weight: bold;
		color: #333333;
	}

	.footer .menu_box .menu:nth-child(1) {
		background-color: #fff;
		color: #333;
	}

	.footer .menu_box .menu:nth-child(2) {
		background-color: #ff7f22;
		color: #fff;
	}

	.show_box {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		z-index: 999;
	}

	.show_box .pupu_box {
		width: 70%;
		background-color: #fff;
		position: absolute;
		left: calc(50% - 35%);
		top: 35%;
		border-radius: 3vw;
		padding: 7vw;
	}

	.show_box .pupu_box .title {
		font-size: 4vw;
		color: #333;
		width: 100%;
		text-align: center;
		font-weight: bold;
	}

	.show_box .pupu_box .rule {
		font-size: 3.5vw;
		color: #333;
		width: 100%;
		text-align: center;
		line-height: 5vw;
		margin-top: 4vw;
	}

	.show_box .pupu_box .rule span {
		color: #ff7f22 !important;
	}

	.show_box .pupu_box .menu_box {
		width: 100%;
		display: flex;
		margin-top: 6vw;
	}

	.show_box .pupu_box .menu_box .menu {
		width: 45%;
		height: 10.5vw;
		line-height: 10.5vw;
		text-align: center;
		font-size: 4vw;
		border-radius: 10.5vw;
		box-sizing: border-box;
	}

	.show_box .pupu_box .menu_box .menu:nth-child(1) {
		margin-right: 10%;
		border: 1px solid #f0f0f0;
		color: #ff7f22;
	}

	.show_box .pupu_box .menu_box .menu:nth-child(2) {
		background-color: #ff7f22;
		color: #fff;
	}

	.member_box {
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		padding: 3vw 4%;
		margin-top: 3%;
	}

	.member_box .member_title {
		width: 30vw;
	}

	.member_box .member_title image {
		width: 100%;
		display: block;
	}

	.member_box .member_text {
		width: 100%;
		font-size: 3.5vw;
		font-weight: bold;
		display: flex;
		align-items: center;
		margin-top: 2vw;
	}

	.member_box .member_text .m {
		color: #ff7f22;
	}

	.member_box .member_rule {
		font-size: 3vw;
		color: #666;
		margin-top: 2vw;
	}

	.member_box .coupon_list {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 2vw;
	}

	.member_box .coupon_list .title {
		flex: 1;
		font-size: 3.5vw;
		font-weight: bold;
		color: #ff7f22;
		text-align: center;
	}

	.member_box .coupon_list .tick {
		width: 6vw;
		line-height: 6vw;
		text-align: center;
		font-size: 5vw;
		color: #e8e8e8;
	}

	.member_box .coupon_list .go {
		flex: 1;
		text-align: right;
		font-size: 3.5vw;
		color: #ff7f22;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.member_box .coupon_list .go .i {
		margin-left: 0.5vw;
		font-size: 4vw;
	}

	.member_box .coupon_list .coupon_content {
		width: 68%;
		position: relative;
	}

	.member_box .coupon_list .coupon_content image {
		width: 100%;
		display: block;
	}

	.member_box .coupon_list .coupon_content .content02 {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0 3vw;
	}

	.member_box .coupon_list .coupon_content .content02 .ride {
		font-size: 4vw;
		color: #ff7f22;
		margin: 0 1vw;
	}

	.member_box .coupon_list .coupon_content .content02 .type {
		font-size: 3.5vw;
		color: #fff;
		flex: 1;
		text-align: right;
		font-weight: bold;
		margin-right: 3vw;
	}

	.member_box .coupon_list .coupon_content .content02 .other {
		display: flex;
		align-items: flex-end;
	}

	.member_box .coupon_list .coupon_content .content02 .other .n {
		font-size: 4.5vw;
		font-weight: bold;
		color: #ff7f22;
	}

	.member_box .coupon_list .coupon_content .content02 .other .i {
		font-size: 3vw;
		color: #ff7f22;
		margin-bottom: 0.5vw;
		margin-left: 0.5vw;
	}
</style>